

//底部扩展键
$(function() {
    $('#doc-dropdown-js').dropdown({justify: '#doc-dropdown-justify-js'});
});

$(function(){
	$(".office_text").panel({iWheelStep:32});
});

// 图标选择样式	
$(document).ready(function(){
  	$(".sidestrip_icon a").click(function(){
      $(".sidestrip_icon a").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
	  $(".middle").hide().eq($(this).index()).show();
    });
});

//input 聚焦
$(document).ready(function(){
  	$("#input_box").focus(function(){
       $('.windows_input').css('background','#fff');
       $('#input_box').css('background','#fff');
   });
    $("#input_box").blur(function(){
       $('.windows_input').css('background','');
       $('#input_box').css('background','');
    });
});

window.onload=function(){   
    function a(){ //三图标
      var si1 = document.getElementById('si_1');
      var si2 = document.getElementById('si_2');
      var si3 = document.getElementById('si_3');
      si1.onclick=function(){
        si1.style.background = "url(images/icon/head_2_1.png) no-repeat"
        si2.style.background = "";
        si3.style.background = "";
      };
      si2.onclick=function(){
        si2.style.background = "url(images/icon/head_3_1.png) no-repeat"
        si1.style.background = "";
        si3.style.background = "";
      };
      si3.onclick=function(){
        si3.style.background = "url(images/icon/head_4_1.png) no-repeat"
        si1.style.background = "";
        si2.style.background = "";
      };
    };
    function b(){
      var text = $('#input_box');  //文本框
	    var chat = document.getElementById('chatbox');    //聊天框
	    var btn = document.getElementById('send');        //发送按钮
      var talk = document.getElementById('talkbox');    //聊天框上的按钮
      btn.onclick=function(){
        if(text.html() ==''){
          text.html('');
        }else{
             SendOut(true,text.html(),chat);
             text.html('');
             talk.style.background = "#fff";
             text[0].style.background = "#fff";
        };
      };
    };
    a();
    b();
  };
$("#input_box").bind('keydown',function(e){
  //e.shiftKey 为 shift 建   e.keyCode == 13 enter建
    if(e.keyCode == 13 && !e.shiftKey){
       console.log("回车键")
    }
    if(e.shiftKey && e.keyCode == 13){
      
    }
});
  function SendOut(type,value,chat){ // type 值true为自己发送 false是他人发送
    var html = '';
    if(type){
      html += '<li class="me"><img src="'+'images/own_head.jpg'+'"><span>'+value+'</span></li>';
    }else{
      html += '<li class="other"><img src="'+'images/own_head.jpg'+'"><span>'+value+'</span></li>';
    }
    chat.innerHTML += html;
    chat.scrollHeight > 473 ? $("#chatbox").css("top",(473-chat.scrollHeight)+"px"):"";
  }
  let chatListData = [
    {
      "user_id":"1",
      "user_head":"images/head/15.jpg",
      "user_name":"早安无恙",
      "user_message":"我是傻逼！，金少凯牛逼！",
      "user_time":"下午 2：54",
    },
    {
      "user_id":"2",
      "user_head":"images/head/2.jpg",
      "user_name":"夏继涛",
      "user_message":"[小程序]",
      "user_time":"上午 11：03",
    },
    {
      "user_id":"3",
      "user_head":"images/head/3.jpg",
      "user_name":"十里老街秋名山车神车队",
      "user_message":"乞讨两块交个话费",
      "user_time":"昨天",
    },
    {
      "user_id":"4",
      "user_head":"images/head/4.jpg",
      "user_name":"阿杰",
      "user_message":"[动画表情]",
      "user_time":"昨天",
    },
    {
      "user_id":"5",
      "user_head":"images/head/5.jpg",
      "user_name":"订阅号",
      "user_message":"庐山国际水彩艺术节：",
      "user_time":"星期三",
    },
    {
      "user_id":"6",
      "user_head":"images/head/6.jpg",
      "user_name":"小龙网食品",
      "user_message":"槟榔的100种吃法",
      "user_time":"星期二",
    },
    {
      "user_id":"7",
      "user_head":"images/head/7.jpg",
      "user_name":"文件传输助手",
      "user_message":"",
      "user_time":"星期二",
    },
    {
      "user_id":"8",
      "user_head":"images/head/8.jpg",
      "user_name":"陈明杰",
      "user_message":"妈的，你在聊我",
      "user_time":"星期四",
    },
    {
      "user_id":"9",
      "user_head":"images/head/9.jpg",
      "user_name":"妈",
      "user_message":"面",
      "user_time":"星期四",
    },
  ];
  function chatList(data){//聊天列表
     var html = '';
     for(var i in data){//user_active 被选中的类名
        html +=`
          <li class="" id="user_id${data[i].user_id}" onclick= "btnon(${data[i].user_id})">
            <div class="user_head"><img src="${data[i].user_head}"/></div>
            <div class="user_text">
              <p class="user_name">${data[i].user_name}</p>
              <p class="user_message">${data[i].user_message}</p>
            </div>
            <div class="user_time">${data[i].user_time}</div>
          </li>
        `
     }
     return html;
  }
  $(".user_list").html(chatList(chatListData)); 

function BtnChatList(){   //左侧列表点击事件
    var user_sid = 0;
    var ten = function(user_id){
        user_sid !== 0 ?document.getElementById(user_sid).classList.remove("user_active"):"";
        user_sid = "user_id"+user_id;
        document.getElementById("user_id"+user_id).classList.add("user_active");
    }
    return ten;
}
var btnon = BtnChatList();

btnon(1)